<template>
  <div class="home-container">
    <!-- 欢迎区域 -->
    <div class="welcome-section bg-gradient-to-r from-blue-50 to-indigo-50 rounded-lg p-6 mb-6 shadow-sm">
      <div class="row align-items-center">
        <div class="col-md-8">
          <h2 class="welcome-title display-4 text-primary mb-3">欢迎使用应用</h2>
          <p class="welcome-description text-gray-600 mb-4">
            这是一个基于Electron和Vue的桌面应用模板。您可以在这里开始编写自己的业务逻辑。
          </p>
        </div>
        <div class="col-md-4 text-center">
          <div class="welcome-icon bg-primary/10 rounded-full p-5 inline-block">
            <i class="bi bi-app" style="font-size: 4rem;"></i>
          </div>
        </div>
      </div>
    </div>

    <!-- 开发指南 -->
    <div class="guide-section">
      <h3 class="section-title h2 text-center mb-6">开发指南</h3>
      <div class="guide-steps bg-white rounded-lg p-6 shadow-sm border border-gray-100">
        <ul class="space-y-4 text-gray-700">
          <li class="guide-step">
            <span class="font-semibold">项目结构：</span>应用使用Electron作为桌面容器，Vue 3作为前端框架。
          </li>
          <li class="guide-step">
            <span class="font-semibold">开发命令：</span>
            <ul class="list-disc list-inside mt-2 ml-4">
              <li>npm run serve:vue - 启动Vue开发服务器</li>
              <li>npm run start - 启动Electron应用</li>
              <li>npm run electron:serve - 同时启动Vue和Electron</li>
            </ul>
          </li>
          <li class="guide-step">
            <span class="font-semibold">业务开发：</span>您可以在src/views目录下创建或修改组件，实现您的业务逻辑。
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeView',
  setup() {
    // 可以添加页面逻辑和数据
    return {};
  },
};
</script>

<style scoped>
.home-container {
  max-width: 1200px;
  margin: 0 auto;
}

.welcome-section {
  animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.welcome-title {
  margin-bottom: 0.75rem;
}

.welcome-description {
  font-size: 1.1rem;
  line-height: 1.6;
}

.guide-section {
  margin-top: 2rem;
}

.section-title {
  margin-bottom: 1.5rem;
}

.guide-steps {
  padding: 1.5rem;
}

.guide-step {
  margin-bottom: 1rem;
  line-height: 1.6;
}
</style>